<template>
	<view class="column">
		<view style="width: 750rpx ;height: 750rpx;">
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
		</view>
		<view>
			<button @click="onClick('clear')">清空</button>
			<button @click="onClick('undo')">撤消</button>
			<button @click="onClick('save')">保存</button>
			<!-- uvue 不支持 openSmooth -->
			<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
		</view>
	</view>
</template>
<script setup>
	import {ref} from 'vue';
	const title = ref('hello');
	const penColor = ref('red');
	const url = ref('');
	const openSmooth = ref(true);
	const signatureRef = ref(null);

	const onClick = (type) => {
		if (type == 'openSmooth') {
			openSmooth.value = !openSmooth.value;
			return
		}
		if (type == 'save') {
			signatureRef.value.canvasToTempFilePath({
				success: (res) => {
					// 是否为空画板 无签名
					// 生成图片的临时路径
					// H5 生成的是base64
					url.value = res.tempFilePath
					console.log(res.isEmpty,url.value)
				}
			})
			return
		}
		signatureRef.value[type]();
	};
</script>
<style lang="scss" scoped>
	.column {
		display: flex;
		flex-direction: column;
	}

	.row {
		width: 200px;
		background-color: #909090;
		display: inline-flex;
		flex-direction: row;
	}
</style>